import React,{Component,createRef} from "react";
// 导入样式
import "@/assets/css/Login.css";
// 调用验证码组件
import Captcha from "@/components/Captcha.jsx";
// 引用antd组件
import { message} from 'antd';
// 导入封装的axios
import axios from "@/services/http.js"

class Login extends Component{
	constructor(props){
		super(props);
		// 数据
		this.state={
			key:"",
			token:"",
		}
		// 定义一个ref(用于后面获取图形验证码实例 调用刷新方法)
		this.ref_Captcha=createRef();
	}
	
	render(){
		return(
			<div className="LoginBackground">
				<div className="loginScreen">
					<h3>立即参战<em className="iconStyle"></em></h3>
					<span>用户名:</span><input type="text" placeholder="数字、字母 6-10位" className="username" onBlur={(e)=>this.checkUsername(e)}/>
					<span>密码:</span><input type="password"  placeholder="数字、字母、下划线 6-10位" className="password" onBlur={(e)=>this.checkPassword(e)}/>
					<span>验证码:</span><input type="text"placeholder="验证码" className="checkstate"/>
					<Captcha setKey={((e)=>this.setKey(e))} ref={this.ref_Captcha}></Captcha>
					<button className="loginTo" onClick={(e)=>this.checkLogin(e)}>登 录</button>
				</div>
			</div>
		)
	}
	
	// 方法区域
	// 图片验证回调
	setKey=(key)=>{
		this.setState({
			key:key
		})
	}
	// 检查用户名
	checkUsername=()=>{
		let username = document.querySelector(".username").value;
		let userReg = /^[a-zA-Z0-9]{6,10}$/;
		let result = userReg.test(username);
		if(result===false){
			message.error("用户名格式错误！请输入6-10位数字或字母！");
			// 清空错误数据
			document.querySelector(".username").value=null;
		}
	}
	// 检查用户名
	checkPassword=()=>{
		let password = document.querySelector(".password").value;
		let passReg = /^[a-zA-Z0-9_]{6,10}$/;
		let result = passReg.test(password);
		if(result===false){
			message.error("密码格式错误！请输入6-10位数字、字母或下划线！");
			// 清空错误数据
			document.querySelector(".password").value=null;
		}
	}
	// 登录按钮
	checkLogin=()=>{
		// 获取用户名
		let username = document.querySelector(".username").value;
		// 获取密码
		let password = document.querySelector(".password").value;
		// 获取验证码值
		let captcha1 = document.querySelector(".checkstate").value;
		// 检验不能为空
		if(username==="" || password==="" || username===null || password===null){
			message.error("用户名、密码不能为空！");
		}else{
			let checkImgList={
				key:this.state.key,
				captcha :captcha1,
			}
			// 验证账号密码
			axios.post("https://www.fastmock.site/mock/49db6bc2e47e172f28ec03877c5263d6/CF_api/login/user").then(ret=>{
				
				// 判断有这个用户
				if(ret.data.data.username.includes(username)){
					// 判断对应密码
					if(ret.data.data.password[ret.data.data.username.indexOf(username)]===password){
						// 发送验证验证码请求
						axios.post("https://reactapi.iynn.cn/api/common/captcha/verify",checkImgList).then(ret=>{
							// console.log(ret.data);
							if(ret.data.errNo===0){
								message.success("登录成功！")
								// 存储一份用户名
								localStorage.setItem("username",username)
								// 跳转主页面
								this.props.history.push("/home");
							}else{
								message.error("验证码错误！")
								// 刷新验证码
								 this.ref_Captcha.current.loadCaptcha();
							}
						})
						
					}else{
						message.error("密码输入错误！");
					}
				}else{
					message.error("未存在该账号！");
				}
			})
			
		}
	}
}

export default Login;